<!DOCTYPE html>
<html>

<head>
	<title>{$title}</title>
    <meta charset="utf-8">
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
	<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-touch-fullscreen" content="yes">
	<meta name="full-screen" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<meta name="format-detection" content="address=no">
	
	<!-- import CSS -->
	<link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/style.css?1">
	<link rel="stylesheet" href="{$Think.config.site.resource_url}css/assets/alert.css">
	<script src="{$Think.config.site.resource_url}js/assets/jquery.js"></script>
	<script src="{$Think.config.site.resource_url}js/assets/alert.js"></script>

	<!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.4/lib/theme-chalk/index.css">   
    <!-- import Vue before Element -->
	<script src="{$Think.config.site.resource_url}js/assets/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>


	<title>传递事件参数</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}

		body, button, input, select, textarea {
			font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
		}

		#container {
			min-width: 403px;
			min-height: 467px;
		}
	</style>
	<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp"></script>
	<script>
        var searchService, markers = [];
        var init = function () {
            var map = new qq.maps.Map(document.getElementById("container"), {
                center: new qq.maps.LatLng(24.465901, 118.118820),
                zoom: 13
            });
            //绑定单击事件添加参数
            qq.maps.event.addListener(map, 'click', function (event) {
                //alert('您点击的位置为: [' + event.latLng.getLat() + ', ' +
                //    event.latLng.getLng() + ']');
                $('#longitude').val(event.latLng.getLng());
                $('#latitude').val(event.latLng.getLat());
            });

            //设置Poi检索服务，用于本地检索、周边检索
            searchService = new qq.maps.SearchService({
                //检索成功的回调函数
                complete: function (results) {
                    //设置回调函数参数
                    var pois = results.detail.pois;
                    var infoWin = new qq.maps.InfoWindow({
                        map: map
                    });
                    var latlngBounds = new qq.maps.LatLngBounds();
                    for (var i = 0, l = pois.length; i < l; i++) {
                        var poi = pois[i];
                        //扩展边界范围，用来包含搜索到的Poi点
                        latlngBounds.extend(poi.latLng);

                        (function (n) {
                            var marker = new qq.maps.Marker({
                                map: map
                            });
                            marker.setPosition(pois[n].latLng);

                            marker.setTitle(i + 1);
                            markers.push(marker);


                            qq.maps.event.addListener(marker, 'click', function () {
                                infoWin.open();
                                infoWin.setContent('<div style="width:280px;height:100px;">' + 'POI的ID为：' +
                                    pois[n].id + '，POI的名称为：' + pois[n].name + '，POI的地址为：' + pois[n].address + '，POI的类型为：' + pois[n].type + '</div>');
                                infoWin.setPosition(pois[n].latLng);
                            });
                        })(i);
                    }
                    //调整地图视野
                    map.fitBounds(latlngBounds);
                },
                //若服务请求失败，则运行以下函数
                error: function () {
                    alert("出错了。");
                }
            });
        }

        //清除地图上的marker
        function clearOverlays(overlays) {
            var overlay;
            while (overlay = overlays.pop()) {
                overlay.setMap(null);
            }
        }
        //设置搜索的范围和关键字等属性
        function searchKeyword() {
            var keyword = document.getElementById("keyword").value;
            clearOverlays(markers);
            //根据输入的关键字在搜索范围内检索
            searchService.search(keyword);
            //根据输入的关键字在圆形范围内检索
            //var region = new qq.maps.LatLng(39.916527,116.397128);
            //searchService.searchNearBy(keyword, region , 2000);
            //根据输入的关键字在矩形范围内检索
            //region = new qq.maps.LatLngBounds(new qq.maps.LatLng(39.936273,116.440043),new qq.maps.LatLng(39.896775,116.354212));
            //searchService.searchInBounds(keyword, region);
        }

	</script>
</head>

<body>	
<!-- 顶部 -->
<div class="head">
	<div class="head_back"><a href="/home/Seller/index"><img src="{$Think.config.site.resource_url}images/assets/arrow.png"></a></div>
    <div class="head_txt">修改商户</div>
</div>

<div class="store_main">
	<div class="binding_main">
		<iframe src="" frameborder="0" name="add_form_iframe" style="display: none"></iframe>
		<form action="/home/Seller/putSeller" id="form" target="add_form_iframe" method="post">
			<input type="hidden" name="callback" value="backFunc">
			<input type="hidden" name="picture" value="{$seller.picture}" id="picture">
			<input type="hidden" name="id" value="{$seller.id}">
			<div class="binding_tit">商户名称：</div>
			<div class="binding_select"><input name="name" value="{$seller.name}" placeholder="请输入商户名称"></div>

			<div class="binding_tit">状态：</div>
			<div class="binding_select">
				<select name="status" id="">
					<option value="1">正常</option>
					<option value="2">异常</option>
				</select>
			</div>

			<div class="binding_tit">绑定登录手机号：</div>
			<div class="binding_select"><input name="mobile" value="{$seller.mobile}" placeholder="请输入绑定登录手机号"></div>
			<div class="binding_tit">商户地址：</div>
			<div class="binding_select">
				<select id="province" class="province" name="province" value="$seller.province">
					<option value="">{:lang('选择省份')}</option>
					{volist name="province" id="vo"}
					<option value="{$vo.addr_id}" <?php if(isset($seller['province'])){ if($vo['addr_id']==$seller['province']){ echo "selected = 'selected'";}} ?>>{$vo.addr_name}</option>
					{/volist}
				</select>

				</label><?php foreach($city as $province_id=>$val){  ?>
				<label>
					<select  class="city" style="<?php echo ($seller['province'] == $province_id) ? "":"display:none"; ?>"  <?php echo ($seller['province'] == $province_id) ? 'name="city"':""; ?> data-placeholder="选择城市......" class="city" id='city_<?php echo $province_id;?>' name="" style="width:150px;" tabindex="2">
						<option value="">{:lang('选择城市')}</option><?php foreach($val as $c){ ?>
						<option value="{$c.addr_id}" hassubinfo="true" <?php if(isset($seller['city'])){ if($c['addr_id']==$seller['city']){ echo "selected = 'selected'";}} ?>><?php echo $c['addr_name'] ?></option><?php }?>
					</select>
				</label><?php }?>
			</div>
			<div class="binding_select"><input value="{$seller.addr}" name="addr" placeholder="请输入详细地址"></div>
			<div class="binding_tit">设置单价：<label style="color: red">设置单价价格，单位（小时）</label></div>
			<div class="binding_select"><input name="per_price" value="{$seller.per_price}" placeholder="请输入单价"></div>
			<div class="binding_tit">佣金比例：<label style="color: red">请输入分成给商户比例，必须大于1并小于100的整数,单位%</label></div>
			<div class="binding_select"><input name="brokerage" value="{$seller.brokerage}" placeholder="请输入佣金比例"></div>
			<div class="binding_tit">门店图片：</div>
			<div class="binding_select" id="app" style="height:auto">
				<el-upload name="img_file" value="fileList2" class="upload-demo" action="/home/Seller/fileUpload" :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList2" list-type="picture">
				  <el-button size="small" type="primary" class="fl">点击上传</el-button>
				  <div slot="tip" class="el-upload__tip load_notice">{:lang('只能上传jpg/png文件，且不超过2M')}</div>
				</el-upload>
			</div>
			<div class="binding_tit">营业时间：</div>
			<div class="binding_select" id="time">
                <input type="hidden" id="shopstart" value="{$seller.shopstart}">
                <input type="hidden" id="shopend" value="{$seller.shopend}">
				<template>
				  <el-time-select name="shopstart" value="{$seller.shopstart}" class="begin_time" placeholder="起始时间" v-model="startTime" :picker-options="{
					  start: '00:00',
					  step: '00:30',
					  end: '24:00'
					}">
				  </el-time-select>
				  <el-time-select name="shopend" value="{$seller.shopend}" class="end_time" placeholder="结束时间" v-model="endTime" :picker-options="{
					  start: '00:00',
					  step: '00:30',
					  end: '24:00'
					}">
				  </el-time-select>
				</template>
			</div>
			<div class="binding_tit">归属地推</div>
			<div class="binding_select">

				<select name="salesman">
					<option value="">{:lang('请选择归属地推')}</option>
					<?php foreach($agents as $key => $vo):  ?>
					<option value="{$vo.id}" <?php if($vo['id']==$seller['salesman']){ echo "selected = 'selected'";} ?>>{$vo.real_name}</option>
					<?php endforeach;?>
				</select>

			</div>
			<div class="binding_tit">门店电话：</div>
			<div class="binding_select"><input name="phone" value="{$seller.phone}" placeholder="请输入门店电话"></div>

			<label class="col-sm-5 control-label">{:lang('地图定位')}</label>
			<div class="col-sm-7">
				<div class="binding_btn">
					<input type="button" class="form-control" data-val="show" id="show_map" style="width:80px;height:35px;border: 1px;margin-top: 5px;" value="显示地图">
				</div>
				<div id="search_map" style="display:none; margin-bottom: 5px;">
					<input id="keyword" type="textbox" value="北京" style="border-width: 1px;height: 20px;">
					<input type="button" value="搜索" onclick="searchKeyword()" style="border: 1px;padding: 5px 10px; margin-left: 10px;">
				</div>
			</div>
			<div class="col-sm-7">
				<div id="container" style="display:none;">

				</div>
			</div>

			<div class="binding_tit">{:lang('经度')}</div>
			<div class="binding_select"><input type="text" class="form-control" id="longitude" name="longitude" value="{$seller.longitude}" placeholder="{:lang('输入')}{:lang('经度')}"></div>

			<div class="binding_tit">{:lang('纬度')}</div>
			<div class="binding_select"><input type="text" class="form-control" id="latitude" name="latitude" value="{$seller.latitude}" placeholder="{:lang('输入')}{:lang('纬度')}"></div>


			<div class="binding_btn">
				<button class="state_confirm">确认</button>
				<button type="reset" id="cancel">取消</button>
			</div>
		</form>
	</div>
</div>




<script>
	/*时间选择*/
    var Main = {
	    data() {
	        var starttTime = $('#shopstart').val();
	        var endTime = $('#shopend').val();

	      return {
	        startTime: starttTime,
	        endTime: endTime
	      };
	   	}
  	}
	var Ctor = Vue.extend(Main)
	new Ctor().$mount('#time')
	
	/*图片上传*/
	var Main = {
	    data() {
	      return {
	        fileList2: {$seller['all_image']}
	        // fileList2: [{name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
	      };
	    },
	    methods: {
	      handleRemove(file, fileList) {
	        console.log(file, fileList);
	      },
	      handlePreview(file) {
	        console.log(file);
	      },
		  handleSuccess(response, file, fileList) {
	          console.log(fileList);
	          var data = [];
              for( var i = 0; i < fileList.length; i++){
                  if (!fileList[i].response) {
                      data[i] = fileList[i].url;
                  } else {
                      data[i] = fileList[i].response.url;
                  }
              }
              data = data.join(',');
              $('#picture').val(data);
		  }
	    }
	  }
	var Ctor = Vue.extend(Main)
	//var fileList = Main.data.fileList2;
	//console.log(Ctor.data);
	new Ctor().$mount('#app')

    function backFunc(data) {
        if(data.res == 1) {
            alert_success(data.msg);
            setTimeout(function(){window.location.href="/home/seller/index"}, 1000);
        }else{
            alert_fail(data.msg);
        }
    }
    $('#cancel').click(function(){
        window.location.href="/home/Seller/index";
    });

    $('#show_map').click(function(){
        val = $(this).attr('data-val');
        if(val == "show"){
            $(this).attr('data-val','hide');
            $('#container').show();
            $('#search_map').show();
            init();
        }else{
            $(this).attr('data-val','show');
            $('#container').hide();
            $('#search_map').hide();
        }
    });

    $('.province').change(function(){
        val = $(this).val();
        $("[id^=city_]").hide();
        $("[id^=city_]").attr("name","");
        $('#city_'+val).attr("name","city");
        $('#city_'+val).show();
    });
</script>